<!doctype html>
<html class="no-js" lang="">

<head>
    <!-- meta -->
    <meta charset="utf-8">
    <meta name="description" content="Flat, Clean, Responsive, admin template built with bootstrap 3">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!-- /meta -->

    <title>测试</title>

    <!-- page level plugin styles -->
    <link rel="stylesheet" href="__PUBLIC__/asset/vendor/offline/theme.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/vendor//pace/theme.css">
    <!-- /page level plugin styles -->

    <!-- core styles -->
    <link rel="stylesheet" href="__PUBLIC__/asset/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/font-awesome.min.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/animate.min.css">
    <!-- /core styles -->

    <!-- template styles -->
    <link rel="stylesheet" href="__PUBLIC__/asset/css/skins/palette.4.css" id="skin">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/fonts/style.1.css" id="font">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/main.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/view/TempQuiz/index.css">
    <!-- template styles -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- load modernizer -->
    <script src="__PUBLIC__/asset/vendor//modernizr.js"></script>
</head>

<!-- body -->

<body>
<div class="app horizontal">

    <!-- top header -->
    <header class="header header-fixed navbar">

        <a href="javascript:;" class="fa fa-bars navbar-toggle off-left visible-xs" data-toggle="collapse" data-target="#hor-menu"></a>

        <div class="brand">
            <a href="index.html" class="navbar-brand">
                <i class="fa fa-heart mg-r-sm"></i>
                <span class="heading-font">心秘籍</span>
            </a>
        </div>

        <div class="collapse navbar-collapse pull-left no-padding" id="hor-menu">
            <ul class="nav navbar-nav">
                <li class=" show-on-hover">
                    <a>
                        <span>你的姓名：张三</span>
                    </a>
                </li>

                <li class=" show-on-hover">
                    <a>
                        <span>性别：男</span>
                    </a>
                </li>
                <li class=" show-on-hover">
                    <a>
                        <span>邮箱地址：test@test.com</span>
                    </a>
                </li>
                <li class=" show-on-hover">
                    <a>
                        <span>测试序列号：{$quiz_key}</span>
                    </a>
                </li>
            </ul>
        </div>

    </header>
    <!-- /top header -->

    <section class="layout">
        <!-- main content -->
        <section class="main-content">



            <!-- content wrapper -->
            <div class="content-wrap">
                <div class="row">
                    <div class="col-md-6 col-xs-12 col-md-offset-3 " id="quiz_info">
                        <section class="panel">
                            <header class="panel-heading"><h3 align="center">卡特尔16pf测验</h3></header>
                            <div class="panel-body ">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div>
                                                <p>人格是稳定的、习惯化的思维方式和行为风格，它贯穿于人的整个心理，是人的独特性的整体写照。了解自己的人格类型及特点对我们的生活和工作都有着非常有利的作用，有助于我们良好人际关系的建立、未来工作的合理开展和顺利发展。更好地了解自己才能更好地发挥自己的潜能来发展自己，实现自我。本测验从乐群性、敏感性、稳定性、活泼性等方面对人进行了描绘，帮助受测者了解自己的性格类型及特点。</p>
                                            </div>

                                            <div>
                                                <b>温馨提示：</b>

                                                <p>1、问卷选项没有“对”与“错”之分。请选择你是怎样做的，而不是选择你认为哪样更好。</p>

                                                <p>2、为了更准确地反应你的人格，请尽量选择第一个和第三个选项。</p>

                                                <p> 3、测试的目的是反映最真实的自己。请最大程度放松下来，选择更接近你平时的感受或行为的那项。</p>
                                            </div>







                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="panel">
                                                <div class="panel-heading">填写基本信息</div>
                                                <div class="panel-body">
                                                    <form role="form" >
                                                        <input type="text" class="form-control mg-b-sm " placeholder="你的姓名" id="username" autofocus required value="{$quiz_info.quiz_username}" >
                                                        <label>性别</label>
                                                        <select class="form-control-new mg-b-sm " id="sex" value="{$quiz_info.quiz_sex}">
                                                            <option>男</option>
                                                            <option>女</option>
                                                        </select>
                                                        <input type="text" class="form-control mg-b-sm" placeholder="邮箱地址" id="email" value="{$quiz_info.quiz_useremail}" required>
                                                        <a  class="btn btn-lg btn-success" id="startquiz">填写完毕，开始测试</a>
                                                    </form>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-6 col-lg-offset-3 add-margin-top" id="main_quiz">
                        <section class="panel">
                            <header class="panel-heading"><h3 align="center">16pf人格测试（184题）</h3></header>
                            <div class="panel-body">
                                <div class="form-group">
                                    <div class="row">

                                        <div class="col-sm-10 col-sm-offset-1" id="qlabels">
                                            <h4><b id="qtitle">问题 </b></h4>
                                            <label class="radio radio-custom highlight checked check_area">
                                                <i class="radio checked"></i>{result.choice_1}</label>
                                            <label class="radio radio-custom highlight check_area">

                                                <i class="radio "></i>{result.choice_2}</label>
                                            <label class="radio radio-custom highlight check_area">
                                                <i class="radio"></i>{result.choice_3}</label>

                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="progress progress-lg">
                                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%" id="qpercent">
                                                    <span class="sr-only">40% Complete (success)</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div >
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

            </div>
            <!-- /content wrapper -->

        </section>
        <!-- /main content -->

    </section>

</div>


<!-- core scripts -->
<script src="__PUBLIC__/asset/vendor//jquery-1.11.1.min.js"></script>
<script src="__PUBLIC__/asset/bootstrap/js/bootstrap.js"></script>
<script src="__PUBLIC__/asset/vendor//jquery.easing.min.js"></script>
<script src="__PUBLIC__/asset/vendor//jquery.placeholder.js"></script>
<script src="__PUBLIC__/asset/vendor//fastclick.js"></script>
<!-- /core scripts -->

</body>
<!-- /body -->

</html>


<script>

//验证后再能提交答案
    function getQuestion(quiz_key)
    {
        var qid ;//返回给页面的qid

        $.ajax({
            type:"POST",
            url:"/Home/CalQuiz/getQuestion",
            dataType:"json",
            async : false,
            data:{
                uid:quiz_key
            },

            success:function(data){
                if (data.code == -1){
                    alert(data.msg);
                    window.location.href="/Home/MyQuiz/show_16pf";
                }
                else{
                    var htmls=['<h4><b>'+data.question+'</b></h4>'];
                    qid=data.qid;
                    for (var i = 0; i <  Object.keys(data).length - 3; i++ ){
                        var key = 'choice_'+ (i + 1);
                        htmls.push('<label class="radio radio-custom highlight check_area">');
                        htmls.push('<i class="radio "></i>'+data[key]+'</label>');

                    }
                    htmls.push('<label id="q_count">'+(data.qid - 2) +'</label>');
                    htmls.push('/');
                    htmls.push('<label id="total_count">'+data.count+'</label>');

                    var totalPercent = ((data.qid - 2)/data.count)*100;
                    totalPercent = totalPercent.toFixed(2);

                    $("#qlabels").html(htmls.join(''));
                    $("#qpercent").attr("style", "width:"+totalPercent+"%");
                }

            },failure: function () {
                alert("failed");
            }
        });


        return qid;
    }



    $(document).ready(function(){
        $("#main_quiz").hide();

        var qid = getQuestion('{$quiz_key}');//获得问题的qid

        //alert(qid);
        var $area = $(".check_area");

        //上来先获取序列号状态









        $("#startquiz").click(function () {
            $.ajax({
                url:"__SELF__",
                dataType:"json",
                type:"POST",
                data:{
                    quiz_usersex:$("#sex").val(),
                    quiz_username:$("#username").val(),
                    quiz_useremail:$("#email").val()
                },
                success:function(data){
                    if(data.code == 1){
                        alert(data.msg);
                        $("#quiz_info").hide();
                        $("#main_quiz").show();
                    }

                    else
                        alert(data.msg);
                }

            });
        });


        $(document).on('click','.check_area',  function () {

            var total_count = $("#total_count").html();
            var q_count = $("#q_count").html();

            $area.find(":radio").attr("checked",false);
            $area.find("i").removeClass("checked");
            $area.removeClass("checked");

            var index = $(this).index();
            index -= 1;
            var $opt = $(".check_area:eq("+index+")");
            $opt.addClass("checked");
            $opt.eq(0).find("i").addClass("checked");
            $opt.eq(0).find(":radio").attr("checked",true);


            index += 1;
            //index is answer
            $.ajax({
                url:"/Home/CalQuiz/submitAnswer",
                dataType:"json",
                type:"POST",
                data:{
                    uid:'{$quiz_key}',
                    qid:qid,
                    answer:index
                },
                success:function(data){
                    if (data.code == 1){
                        console.log(q_count);
                        console.log(total_count);
                        if (q_count == total_count){
                            alert("做完了，即将计算结果！");
                            $.ajax({
                                url:"/Home/CalQuiz",
                                dataType:"json",
                                type:"GET",
                                success:function(data){
                                    if (data.code == 1){
                                        alert(data.msg);
                                        window.location.href="/Home/MyQuiz/show_16pf";
                                    }
                                    else{
                                        alert(data.msg);
                                    }
                                }
                            })
                        }
                        else{
                            qid = getQuestion('{$quiz_key}');
                        }
                    }
                    else{
                        alert(data);
                    }
                }

            });

        });

    });
</script>